import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 解决vue3的兼容性问题
// import '@babel/polyfill'
import './plugins/element.js'
import axios from 'axios'
import qs from 'qs'
// 导入全局样式表
import './assets/css/global.css'
//导入图标样式
import './assets/fonts/iconfont.css'
import TreeTable from 'vue-table-with-tree-grid'

// 导入富文本编辑器组件
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本对应的样式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


// 配置请求的根路径2
axios.defaults.baseURL = '/api'
//通过axios请求拦截器添加token，保证拥有获取数据的权限
//在request拦截器中展示进度条NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start()
  // 为请求头对象，添加Token验证的Authorization字段
  config.headers.token = window.sessionStorage.getItem('token')
  // 非特殊接口，都对请求数据进行序列化
  if (config.url != "SystemroleAction/updateButtons" && config.url != "SystemcommunityrolemenuchildrenAction/updateStates")
    config.data = qs.stringify(config.data);
  config.headers["Content-Type"] = "application/x-www-form-urlencoded"
  return config
})
// 在response拦截器中隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.component('tree-table', TreeTable)
// 将富文本编辑器注册为全局可用的组件
Vue.use(VueQuillEditor)

//解决侧边栏菜单收缩问题
import Fragment from 'vue-fragment'
import { Axis } from 'echarts'
Vue.use(Fragment.Plugin)

// 全局定义格式化时间的过滤器
Vue.filter('dateFormat', function (originVal) {
  const dt = new Date(originVal * 1000)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getUTCMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

// 百度地图组件
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'BbFgo4xoxbBqeviGlbYckIOleCXXKMBb'
})
import { BmlMarkerClusterer } from 'vue-baidu-map'

Vue.component('bml-marker-cluster', BmlMarkerClusterer)

//定义全局格式化时间函数  timeStamp是时间戳
Vue.prototype.dateFormat = function () {
  const dt = new Date();
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getUTCMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}


/** 权限指令,对按钮权限的控制 **/
Vue.directive('has', {
  inserted: function (el, binding) {
    // 使用$_has方法判断权限，如果没有该权限，则用parentNode.removeChild删除当前节点，相当于直接删除当前demo，实现不显示效果
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 权限检查方法（且把该方法添加到vue原型中）
Vue.prototype.$_has = function (value) {
  let isExist = false
  // 从浏览器缓存中获取权限数组（该数组在登入成功后拉取用户的权限信息时保存在浏览器的缓存中）
  var buttonpermsStr = sessionStorage.getItem('myButtonList')
  if (buttonpermsStr === undefined || buttonpermsStr == null) {
    return false
  }
  if (buttonpermsStr.indexOf(value) >= 0) {
    // 若在按钮中定义的权限字段能在后端返回的权限数组中能找到，则该按钮可显示
    isExist = true
  }
  return isExist
}



new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')



